<script lang="ts" setup>
import { useRoute } from 'vue-router'
import { useThemeStore } from '@/store'
import type { Theme } from '@/store/modules/theme'
import { reactive, ref, watch } from 'vue'
import { useUserStore } from '@/store'

const route = useRoute()
const themeStore = useThemeStore()
const userStore = useUserStore()
const theme = ref<Theme | null>(themeStore.getTheme(route.params))

const settingVisible = ref(false)

const changeVisible = () => {
  settingVisible.value = !settingVisible.value
}

const toggleTheme = (value: unknown) => {
  userStore.setTheme(value as 'dark' | 'light')
}

const images = reactive<
  {
    className: string
    url: string
    used: boolean
  }[]
>([
  {
    className: 'image-1',
    url: 'https://qingshaner.oss-cn-hangzhou.aliyuncs.com/images/202204040851213.jpg',
    used: false
  },
  {
    className: 'image-2',
    url: 'https://qingshaner.oss-cn-hangzhou.aliyuncs.com/images/202205011921669.jpg',
    used: false
  },
  {
    className: 'image-3',
    url: 'https://qingshaner.oss-cn-hangzhou.aliyuncs.com/images/202209110948296.png',
    used: false
  },
  {
    className: 'image-4',
    url: 'https://qingshaner.oss-cn-hangzhou.aliyuncs.com/images/202209110946170.jpg',
    used: false
  },
  {
    className: 'image-5',
    url: 'https://qingshaner.oss-cn-hangzhou.aliyuncs.com/images/202204031054853.jpg',
    used: false
  },
  {
    className: 'image-6',
    url: 'https://qingshaner.oss-cn-hangzhou.aliyuncs.com/images/202204031054090.jpg',
    used: false
  },
  {
    className: 'image-7',
    url: 'https://qingshaner.oss-cn-hangzhou.aliyuncs.com/images/202204031054091.jpg',
    used: false
  },
  {
    className: 'image-8',
    url: 'https://qingshaner.oss-cn-hangzhou.aliyuncs.com/images/202204031102225.jpg',
    used: false
  }
])

const matchImage = () => {
  const index = images.findIndex((item) => item.className === theme.value?.backgroundImage)
  if (index !== -1) images[index].used = true
}

const handleImage = (className: string) => {
  const index = images.findIndex((item) => item.used)
  if (index !== -1) images[index].used = false
  if (theme.value) theme.value.backgroundImage = className
  matchImage()
}

const cleanBackgroundImage = () => {
  theme.value!.backgroundImage = ''
  const index = images.findIndex((item) => item.used)
  if (index !== -1) images[index].used = false
}

watch(
  () => route.params,
  () => {
    theme.value = themeStore.getTheme(route.params)
    handleImage(theme.value?.backgroundImage || '')
  },
  {
    immediate: true
  }
)
</script>

<template>
  <button class="setting-btn" @click="changeVisible">
    <IconBrush />
  </button>
  <a-drawer
    class="mask-transparent"
    width="300px"
    :closable="false"
    :footer="false"
    :visible="settingVisible"
    placement="left"
    @cancel="changeVisible"
  >
    <template #title>
      <h3>{{ $t('list.settingbtn.title') }}</h3>
    </template>
    <aside class="aside-setting">
      <p>
        <span>{{ $t('list.settingbtn.background') }}</span>
        <span class="inline-block h-6 w-6 overflow-hidden rounded-full">
          <input
            v-model="theme!.background"
            class="relative h-12 w-12 rounded-full bg-transparent -left-4 -top-4"
            type="color"
          />
        </span>
      </p>
      <p>
        <span>{{ $t('setting.dark') }}</span>
        <a-switch
          v-model="userStore.theme"
          type="line"
          checked-value="dark"
          unchecked-value="light"
          @change="toggleTheme"
        >
        </a-switch>
      </p>
      <p>
        <span>{{ $t('list.settingbtn.image') }}</span>
      </p>
      <div class="img-box">
        <span
          v-for="item of images"
          :key="item.className"
          :class="`img-item ${item.used ? 'img-selected' : ''}`"
          @click="handleImage(item.className)"
        >
          <img :src="item.url" />
        </span>
        <a-button class="m-4 w-full" @click="cleanBackgroundImage"> 取消背景 </a-button>
      </div>
    </aside>
  </a-drawer>
</template>

<style scoped>
.setting-btn {
  @apply rounded mt-8 opacity-50 right-8 leading-8 w-8 absolute;
  @apply bg-gray-200 dark:bg-gray-100 hover:opacity-100;
  @apply duration-300;
}

.setting-btn:hover {
  @apply dark:bg-gray-400;

  box-shadow: 0 0 4px 1px #d9d9d9;
}

@media (max-width: 768px) {
  .setting-btn {
    transform: translateX(-130%);
  }
}

.aside-setting {
  @apply flex flex-col h-full py-4 px-2;
  @apply children:(mb-4 flex justify-between items-center);
}

.img-box {
  @apply flex flex-wrap flex-1 overflow-auto;
}

.img-box::-webkit-scrollbar {
  width: 0;
}

.img-item {
  @apply rounded-md m-1 max-w-9/20 overflow-hidden;

  border-width: 4px;
  border-style: solid;
  border-color: transparent;
  transition: border-color 0.5s;
}

.img-item:hover,
.img-selected {
  border-width: 4px;

  @apply border-gray-700 dark:border-light-300;
}
</style>
